<template>
  <!-- 颜色：#DB261D -->
  <div>
    <mt-header fixed title="调价日历"> </mt-header>
    <div @click="shouPup" style="margin-top: 10vh">
      <mt-cell title="选择城市：" is-link>
        <input class="text-hui" v-model="message" />
      </mt-cell>
    </div>
    <div>
      <mt-cell title="下次调价日期预计在">{{ swiper.newtime }}</mt-cell>
      <span class="prompt">“顶部”</span>为最近已调价日期
    </div>

    <!-- 油价表 -->
    <el-table
      :data="tableData"
      class="table_list"
      :row-style="tableRowClassName"
      border
      style="margin-bottom: 55px"
    >
      <el-table-column min-width="100" prop="updatetime" label="调价日期">
      </el-table-column>
      <el-table-column fit prop="oil_0" label="0#"> </el-table-column>
      <el-table-column fit prop="oil_92" label="92#"> </el-table-column>
      <el-table-column fit prop="oil_95" label="95#"> </el-table-column>
      <el-table-column fit prop="oil_98" label="98#"> </el-table-column>
    </el-table>

    <mt-popup
      closeOnClickModal="true"
      v-model="popupVisible"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%; height: 30%"
    >
      <mt-picker
        style="width: 100%"
        :show-toolbar="true"
        :visible-item-count="5"
        :slots="slots"
        @change="onValuesChange"
      >
        <div class="picker_header">
          <div class="usi-btn" @click="abolish">取消</div>
          <div class="">请选择查看的地区</div>
          <div class="usi-btn" @click="define">确定</div>
        </div>
      </mt-picker>
      <!-- <ul v-if="data">
        <li id="list" v-for="value,i in data" :key="i">{{value.pname}}</li>
      </ul> -->
    </mt-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      swiper: "",

      // 油价列表的数值
      tableData: [],

      message: "安徽",
      slots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: ["滑动寻找"],
        },
      ],
      popupVisible: false,
    };
  },

  created() {
    this.getAdd();
  },

  mounted() {
    // 页面加载时，显示定位城市所有油价
    this.oilPrice();

    // 请求最新一次调价时间
    let url = "v1/swiper/lun";
    this.axios.get(url).then((res) => {
      console.log("调价：", res.data);
      this.swiper = res.data[0];
    });
  },

  methods: {
    // 设置油价表最新消息绑定样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex == 1) {
        return "color: #ff6600 !important;";
      } else {
        return "";
      }
    },

    // 通过选择的城市获取他所有的油价
    oilPrice() {
      this.axios.get(`v1/family?pname=${this.message}`).then((res) => {
        // console.log(res);
        // this.tableData = res.data;
        // console.log(this.tableData);
        res.data.forEach((item) => {
          item.oil_0 = item.oil_0.toFixed(2);
          item.oil_92 = item.oil_92.toFixed(2);
          item.oil_95 = item.oil_95.toFixed(2);
          item.oil_98 = item.oil_98.toFixed(2);
        });
        this.tableData = res.data;
      });
    },

    // 获取所有地址列表
    getAdd() {
      let url = "v1/area";
      this.axios.get(url).then((res) => {
        // console.log(res.data);
        for (var index in res.data) {
          let item = res.data[index];
          // console.log(item.pid-1)
          this.slots[0].values[item.pid - 1] = item.pname;
          // console.log(this.slots[0].values)
        }
      });
    },

    // 点击“选择城市”，获取并显示城市列表弹框
    shouPup() {
      // 请求地址，获取所有地址列表
      this.getAdd();
      this.popupVisible = true;
    },

    // 地址发生改变时触发，获取改变后的地址
    onValuesChange(picker, values) {
      console.log("values:", values[0]);
      this.value = values[0];
    },
    // 点击取消时
    abolish() {
      this.popupVisible = false;
    },
    // 点击确认时
    define() {
      this.message = this.value;
      this.popupVisible = false;
      // 获取所选城市的所有油价
      this.oilPrice();
      this.$store.commit("updateUname", this.message);
    },
  },
};
</script>

<style scoped>
.mint-header {
  height: 10vh;
  background-color: #db261d;
  font-size: 1.4em;
}
.mint-tabbar > .mint-tab-item.is-selected {
  color: #db261d;
}
.usi-btn {
  color: #ff6600;
}
.table_list {
  width: 95%;
  margin: 0 auto;
  text-align: center;
}
.picker-items {
  margin-top: 10px !important;
}
.picker_header {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}

.text-hui {
  border: none;
  color: #ff6600;
  text-align: right;
  caret-color: transparent;
}
.prompt {
  display: inline-block;
  padding: 0 10px 20px;
  color: #ff6600;
}
</style>
